<template>
  <view class="content">
    <view class="course_warp" v-if="type === 'course'">
      <course-card v-for="item in courseList" :key="item.id" :item="item" />
    </view>
    <view v-else class="book_warp">
      <book-card v-for="item in bookList" :item="item" :key="item.id" />
    </view>
  </view>
</template>

<script>
import { setNavigationBarTitle } from "@/utils/setting"
import { coursePackageList } from "@/api/course"
import { getBookList } from "@/api/book"
export default {
  data() {
    return {
      params: {
        pageSize: 20,
        pageNum: 1,
      },
      type: "",
      courseList: [],
      bookList: [],
      hasMore: true,
    }
  },
  onLoad(options) {
    console.log(options);
    setNavigationBarTitle(options.title)
    const arr = Object.keys(options)
    if (arr.includes("type")) {
      this.type = "course"
      this.getCourseList()
    } else {
      this.type = "book"
      delete options.type
      this.getBookList()
    }
    delete options.title
    this.params = Object.assign(options, this.params)
  },
  onReachBottom() {
    if (!this.hasMore) return
    let fn
    if (this.type === "course") {
      fn = this.getCourseList()
    } else if (this.type === "book") {
      fn = this.getBookList()
    }
    this.$u.throttle(fn, 1000, true)
  },
  methods: {
    getCourseList() {
      coursePackageList(this.params).then((res) => {
        this.courseList = [...this.courseList, ...res.list]
        if (res.list.length < this.params.pageSize) {
          this.hasMore = false
        }
      })
    },
    getBookList() {
      getBookList(this.params).then((res) => {
        this.bookList = [...this.bookList, ...res.list]
        if (res.list.length < this.params.pageSize) {
          this.hasMore = false
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  padding: 20upx 30upx;
}
</style>
